<template>
	<div class="comment_part">
		<div class="right_refresh">
			<el-button type="primary" :icon="Refresh" @click="getData">刷新列表</el-button>
		</div>
		<h4>评论</h4>
		<div class="show_part" :style="{ height: showSplitPhoto ? 'calc(70vh - 250px)' : 'calc(70vh - 150px)' }">
			<div v-for="(item, index) in commentList" :key="index" :class="item.postion == 'left' ? 'avatar_left' : 'avatar_right'">
				<img class="avatar_part" :src="item.avatar" alt="" />
                <div :class="item.postion == 'left' ? 'name_left' : 'name_right'">
                    {{ item.createUserName }} {{  item.createTime}}
                    <div class="arrow_part">
						<div :class="item.postion == 'left' ? 'arrow_left' : 'arrow_right'"></div>
						<div style="width:100%">
							{{ item.info }}
							<div class="img_display">
								<PreviewImg v-for="img in item.imageList" :key="img" style="width: 90px;height:90px; margin-right: 10px" :src="img" alt="" />
							</div>
						</div>
					</div>
                </div>
			</div>
		</div>
		<div>
			<h4 style="margin-bottom: 10px">{{myUserName}}</h4>
			<el-input type="textarea" v-model="comment"></el-input>
			<!-- 上传图片 -->
			<!-- <AplidUpload v-if="showSplitPhoto" style="margin-top: 10px" :limit="4" v-model="myPhoto" listType="picture-card"></AplidUpload> -->
			<DragUpload :key="uploadKey" v-model="images" v-if="showSplitPhoto" style="margin-top: 10px" :limit="4"></DragUpload>
			<div class="btn_part">
				<el-button type="primary" @click="addCommit">确认</el-button>
				<el-button @click="showSplitPhoto = !showSplitPhoto">截图</el-button>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { ref, reactive, toRefs, onMounted } from 'vue'
import AplidUpload from '@/components/AplidCrud/src/AplidUpload/index.vue'
import apiMod from '@/apiMod/index'
import DragUpload from '@/views/aplid/DragUpload/index.vue'
import { getStore } from '@/utils/store';
import {Refresh} from '@element-plus/icons-vue'
import PreviewImg from '@/views/aplid/DetailPage/ContentListItem/FileList/PreviewImg/index.vue'

let props = defineProps({
	nowRowData: {
		type: Object,
		default: () => ({}),
	},
})

let images = ref([])
let showSplitPhoto = ref(false)
let commentList: any = ref([
])
let comment = ref('')
let uploadKey = ref(0)
const addCommit = () => {
	if(!comment.value&&images.value.length==0){
		ElMessage.error('不可发送空消息')
		return
	}
	let params = {
		comment: JSON.stringify({
			info:comment.value,
			images:images.value
		}),
		taskId: props.nowRowData.taskId,
	}
	apiMod.view_zwglTaskRemark_add(params).then((res) => {
		comment.value = ''
		images.value=[]
		getData()
		// 清空截图
		images.value = []
		uploadKey.value = Math.random()
	})
}
// 获得当前登录人的id
let userInfo = getStore('userInfo')
let myUserId = userInfo.id
let myUserName = ref(userInfo.realName)
const getData = () => {
	apiMod.view_zwglTaskRemark_list({taskId: props.nowRowData.taskId}).then((res) => {
        commentList.value = res.data
        commentList.value.forEach((el) => {
			if(el.comment){
				let comment = JSON.parse(el.comment)
				el.info = comment.info
				el['imageList'] = comment.images
			}
            el['avatar'] ="https://aplid-51.oss-cn-hangzhou.aliyuncs.com/1699414087525_5ea77b1d.webp"
            if(el.createUserId==myUserId){
                el.postion = "right"
            }else{
                el.postion = "left"
            }
            
        })
	})
}
getData()
// let dsq = setInterval(()=>{
// 	getData()
// },4000)

// onUnmounted(()=>{
// 	clearInterval(dsq)
// })
</script>
<style scoped lang="scss">
.img_display{
	display: flex;

}
.name_left{
    width: calc(100% - 70px);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}
.name_right{
    width: calc(100% - 70px);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-end;
}
.comment_part {
	width: 700px;
	border-left: 1px solid gray;
	padding: 20px;
	box-sizing: border-box;
	overflow: auto;
	-ms-overflow-style: none;
	overflow: -moz-scrollbars-none;
}
.comment_part::-webkit-scrollbar {
	display: none;
	width: 0;
}
.show_part {
	height:50vh;
	overflow: auto;

	-ms-overflow-style: none;
	overflow: -moz-scrollbars-none;
}
.show_part::-webkit-scrollbar {
	display: none;
	width: 0;
}
.btn_part {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	margin-top: 10px;
}
.arrow_part {
	
	background-color:#c9e7ff;
	padding: 10px;
	border-radius: 10px;
	position: relative;
}
.arrow_left {
	left: -5px;
	top: 10px;
	transform: rotate(45deg);
	height: 10px;
	width: 10px;
	background-color:#c9e7ff;
	position: absolute;
}
.arrow_right {
	right: -5px;
	top: 10px;
	transform: rotate(45deg);
	height: 10px;
	width: 10px;
	background-color: #c9e7ff;
	position: absolute;
}

.avatar_part {
	margin: 0 10px;
	height: 60px;
	width: 60px;
	border-radius: 50%;
}
.avatar_left {
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	margin-bottom: 40px;
}
.avatar_right {
	width: 100%;
	display: flex;
	flex-direction: row-reverse;
	justify-content: flex-start;
	margin-bottom: 40px;
}
.right_refresh{
	width: 100%;
	display: flex;
	flex-direction: row-reverse;
}
</style>
